<template>
    <div :class="'box ' + className">
        <div class="title">
            <span>{{ title }}</span>
            <router-link :to="{path:'/scheduler/resource',query:{groupId:data.id}}">资源详情</router-link>
        </div>
        <div class="content">
            <div class="chart">
                <div class="chart-wrap">
                    <PieChart v-model="currentIndex" :seriesData="seriesData"></PieChart>
                </div>
                <!-- <div class="chart-legend">
                    <div class="item " :class="{'full':currentIndex===0}">
                        <div class="bg yellow "></div>
                        <div class="legend-name">
                            物理机
                            <div class="desc">物理资源</div>
                        </div>
                        <div class="num">{{ host[index] }}</div>
                    </div>
                    <div class="item" :class="{'full':currentIndex===1}">
                        <div class="bg blue"></div>
                        <div class="legend-name">
                            云主机(台)
                            <div class="desc">虚拟资源</div>
                        </div>
                        <div class="num">{{ get(data,'addrList').split(',').length }}</div>
                    </div>
                    <div class="item" :class="{'full':currentIndex===2}">
                        <div class="bg primary"></div>
                        <div class="legend-name">
                            应用容器
                            <div class="desc">容器资源</div>
                        </div>
                        <div class="num">0</div>
                    </div>
                </div> -->
            </div>
            <div class="legend">
                <div class="legend-item">
                    <div>
                        <span>
                            <img src="./images/ic_cpu.svg" alt="">
                            CPU算力
                        </span>
                        <span class="num">{{ get(data,'cpuNum') }}<i>核</i></span>
                    </div>
                    <div class="split"></div>
                    <div>
                        <span>
                            使用率
                        </span>
                        <span class="num">{{ parseInt(get(data,'cpuUsage') * 100) }}%</span>
                    </div>
                </div>
                <div class="legend-item">
                    <div>
                        <span>
                            <img src="./images/ic_gpu.svg" alt="">
                            GPU算力
                        </span>
                        <span class="num">{{ get(gpuInfo,'num',0) }}<i>块</i></span>
                    </div>
                    <div class="split"></div>
                    <div>
                        <span>
                            使用率
                        </span>
                        <span class="num">{{ get(gpuInfo,'gpuUitl',0)*100 }}%</span>
                    </div>
                </div>
                <div class="legend-item">
                    <div>
                        <span>
                            <img src="./images/ic_ram.svg" alt="">
                            内存总量
                        </span>
                        <span class="num">{{ get(data,'memorySize') | toGB}}<i>G</i></span>
                    </div>
                    <div class="split"></div>
                    <div>
                        <span>
                          使用率
                        </span>
                        <span class="num">{{ parseInt(get(data,'memoryUsage') * 100) }}%</span>
                    </div>
                </div>
                <div class="legend-item">
                    <div>
                        <span>
                            <img src="./images/ic_storage.svg" alt="">
                            存储大小
                        </span>
                        <span class="num">{{ get(data,'dataTotal',0) | toGB }}<i>G</i></span>
                    </div>
                    <div class="split"></div>
                    <div>
                        <span>
                            使用率
                        </span>
                        <span class="num">{{ get(data,'dataTotal',1) && ((get(data,'dataUsed',0) / get(data,'dataTotal',1))*100).toFixed(1) }}%</span>
                    </div>
                </div>
                <div class="legend-item">
                    <div>
                        <span>
                            <img src="./images/ic_task.svg" alt="">
                            运行任务
                        </span>
                        <span class="num">{{ get(data,'workerWaitingTaskCount',0) }}</span>
                    </div>
                    <div class="split"></div>
                    <div>
                        <span>
                            等待任务
                        </span>
                        <span class="num">{{ get(data,'workerWaitingTaskCount',0) }}</span>
                    </div>
                </div>
            </div>
            <!-- <div class="legend">
                <div class="legend-item">
                    <span>
                        CPU使用率
                    </span>
                    <span class="num">{{ parseInt(get(data,'cpuUsage') * 100) }}%</span>
                </div>
                <div class="legend-item">
                    <span>
                        GPU使用率
                    </span>
                    <span class="num">-</span>
                </div>
                <div class="legend-item">
                    <span>
                        剩余内存
                    </span>
                    <span class="num">{{ parseInt(get(data,'reservedMemory') * 100) }}%</span>
                </div>
                <div class="legend-item">
                    <span>
                        存储空余率
                    </span>
                    <span class="num">-</span>
                </div>
                <div class="legend-item">
                    <span>
                        等待任务
                    </span>
                    <span class="num">{{ get(data,'workerWaitingTaskCount',0) }}</span>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
  import { get } from 'lodash'
  import PieChart from './PieChart'
  import { mapActions } from 'vuex'
  export default {
    props: {
      title: String,
      className: String,
      index: Number,
      data: Object
    },
    components: { PieChart },
    computed: {
      seriesData () {
        return [{ name: '物理机', value: get(this.data, 'physicalMachine') }, { name: '云主机', value: get(this.data, 'virtualMachine') }, { name: '应用容器', value: 0, unit: '个' }]
      }
    },
    data: function () {
      return {
        gpuInfo: {},
        currentIndex: null,
        host: [8, 3, 6, 2, 14, 6, 5, 7, 8, 12, 3, 14, 6]
      }
    },
    mounted () {
      this._getWorkerGroupGPUInfo()
    },
    methods: {
      ...mapActions('security', ['getWorkerGroupGPUInfo']),
      _getWorkerGroupGPUInfo () {
        this.getWorkerGroupGPUInfo({ groupId: this.data.id }).then(res => {
          this.gpuInfo = res
        }).catch(e => {
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    // &.cs {
    //     background: #ffffff url(./images/bg_mainpage_CSCS.png) top right no-repeat;
    // }
    // &.zt {
    //     background: #ffffff url(./images/bg_mainpage_ZTYG.png) top right no-repeat;
    // }
    // &.xt {
    //     background: #ffffff url(./images/bg_mainpage_XTDSJ.png) top right no-repeat;
    // }
    .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        justify-content: space-between;
        a {
          font-size: 14px;
        }
    }
    .content {
        flex: 1;
        display: flex;
        padding-top: 10px;
        padding-bottom: 10px;
        .chart {
            background: linear-gradient(90deg, #ffffff 0%, #f5f6f8 10%, #f5f6f8 100%);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-content: center;
            align-self: stretch;
            justify-content: center;
            .chart-wrap {
                margin: 0 auto;
                width: 200px;
                height: 200px;
            }
            .chart-legend {
                margin: 0 30px;
                flex: 1;
                position: relative;
                display: flex;
                flex-direction: column;
                padding: 20px 0;
                justify-content: space-between;
                align-items: center;
                .item {
                    width: 100%;
                    display: flex;
                    height: 40px;
                    justify-content: space-between;
                    align-items: center;
                    position: relative;
                    padding: 0 20px;
                    line-height: 1;
                    // cursor: pointer;
                    .legend-name {
                        font-size: 12px;
                        z-index: 10;
                        .desc {
                            font-weight: 300;
                            color: #999999;
                            margin-top: 2px;
                        }
                    }
                    // &:hover {
                    //   color: #ffffff;
                    //     .bg {
                    //         width: 100%;
                    //     }
                    //     .legend-name {
                    //         color: #ffffff;
                    //         font-size: 12px;
                    //         z-index: 10;
                    //         .desc {
                    //             color: #ffffff;
                    //         }
                    //     }
                    // }
                    .bg {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 4px;
                        height: 40px;
                        border-radius: 4px;
                        z-index: 0;
                        transition: all 0.3s ease;
                        &.yellow {
                            background: linear-gradient(174deg, #f3b407 0%, #f27011 100%);
                        }
                        &.blue {
                            background: linear-gradient(174deg, #82bfff 0%, #0d4df2 100%);
                        }
                        &.primary {
                            background: linear-gradient(180deg, #33317e 0%, #9c99ff 100%);
                        }
                    }
                    &.full {
                        color: #ffffff !important;
                        .desc {
                            color: #ffffff !important;
                        }
                        .bg {
                            width: 100%;
                        }
                    }
                }
                .num {
                    font-size: 30px;
                    height: 40px;
                    font-family: Oxanium, Oxanium-Bold;
                    font-weight: 700;
                    z-index: 10;
                    display: flex;
                    align-items: center;
                }
            }
        }
        .legend {
            margin-left: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .legend-item {
                height: 40px;
                padding: 0 12px;
                font-size: 14px;
                font-weight: 300;
                background: linear-gradient(90deg, #f5f6f8, #ffffff 100%);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                & > div {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                .split {
                    margin: 0 20px;
                    flex: 0 0 1px;
                    height: 20px;
                    border-left:1px solid rgba(216, 216, 216, 1);
                }
                .num {
                    font-size: 20px;
                    font-family: Oxanium, Oxanium-Bold;
                    font-weight: 700;
                    position: relative;
                    i {
                        font-style: normal;
                        font-weight: 700;
                        font-size: 12px;
                        margin-left: 2px;
                    }
                }
            }
            .legend-item + .legend-item {
                margin-top: 10px;
            }
        }
    }
}
</style>
